<template>
  <el-container>
    <el-aside width="200px">
      <CompanyMenu></CompanyMenu>
    </el-aside>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark" style="height: 20px">面包屑</div></el-col>
    </el-row>
    <el-row style="margin-top: 30px;margin-left: -30px">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="stretch" style="width: 100%;">
            <template v-for="department in departments" :key="department.id">
              <el-tab-pane :label="department.name" style="width: 100%;">
                <el-table :data="companyUsers" style="width: 100%">
                  <el-table-column label="姓名" prop="userinfo.name"></el-table-column>
                  <el-table-column label="职位" prop="position.name"></el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button size="mini" @click="handleEdit(scope.$index)">修改</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </template>
            <el-tab-pane label="未分配部门" style="width: 100%;">
              <el-table :data="companyUsers" style="width: 100%">
                <el-table-column label="姓名" prop="userinfo.name"></el-table-column>
                <el-table-column label="职位" prop="position.name"></el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index)">修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <DistributionDialog ref="distributionDialog"></DistributionDialog>
  </el-container>
</template>

<script>
import CompanyMenu from "@/components/menu/CompanyMenu.vue";
import instanceToken from "@/utlis/tokenIdentify.js";
import DistributionDialog from "@/components/leader/department/DistributionDialog.vue";
export default {
  name: 'DistributionView',
  components: {
    CompanyMenu,
    DistributionDialog
  },
  data() {
    return {
      activeName: [],
      departments:[],
      stretch:false,
      companyUsers:[],
      initCompanyUsers:[],
      tableData:[]
    };
  },
  created() {
    this.initDepartment();
    this.initCompanyUser();
  },
  methods: {
    initDepartment(){
      instanceToken.get("/apply/leader/initDepartment").then(res =>{
        this.activeName = res.data.data[0].id;
        this.departments = res.data.data;
      });
    },
    initCompanyUser(){
      instanceToken.get("/apply/leader/initCompanyUser").then(res =>{
        this.initCompanyUsers = res.data.data;
      })
    },
    handleClick(tab) {
      this.companyUsers = [];
      if (tab.props.label !== '未分配部门'){
        let departmentId = this.departments[this.activeName].id
        for (let i = 0;i < this.initCompanyUsers.length; i++){
          if(departmentId === this.initCompanyUsers[i].departmentId){
            this.companyUsers.push(this.initCompanyUsers[i]);;
          }
        }
      }
      else {
        for (let i = 0;i < this.initCompanyUsers.length; i++){
          if(this.initCompanyUsers[i].departmentId === null){
            this.companyUsers.push(this.initCompanyUsers[i]);;
          }
        }
      }
    },
    handleEdit(index){
      let id = this.companyUsers[index].id;
      this.$refs.distributionDialog.selectDepartment(id);
      this.$refs.distributionDialog.show()

    }
  },

}
</script>